﻿@namespace BootstrapBlazor.Components
@inherits BootstrapComponentBase

<div @attributes="@AdditionalAttributes" class="@ClassString">
    <div class="picker-panel-body-wrapper">
        @if (ShowSidebar)
        {
            <div class="picker-panel-sidebar">
                @if (SidebarTemplate != null)
                {
                    @SidebarTemplate(OnClickDateTime)
                }
                else
                {
                    <div class="sidebar-item">
                        <DatePickerCell Value="@DateTime.Today" Text="@Today" OnClick="@(async d => await OnClickDateTime(d))" />
                    </div>
                    <div class="sidebar-item">
                        <DatePickerCell Value="@DateTime.Today.AddDays(-1)" Text="@Yesterday" OnClick="@(async d => await OnClickDateTime(d))" />
                    </div>
                    <div class="sidebar-item">
                        <DatePickerCell Value="@DateTime.Today.AddDays(-7)" Text="@Week" OnClick="@(async d => await OnClickDateTime(d))" />
                    </div>
                }
            </div>
        }
        <div class="picker-panel-body">
            <div class="@DateTimeViewClassName">
                <span class="date-picker-editor-wrap">
                    <input type="text" autocomplete="off" readonly placeholder="@DatePlaceHolder" class="input-inner form-control" value="@DateValueString">
                </span>
                <span class="date-picker-editor-wrap">
                    <input type="text" autocomplete="off" readonly placeholder="@TimePlaceHolder" class="input-inner form-control" value="@TimeValueString" @onclick="@OnClickTimeInput">
                    <TimePickerBody @bind-Value="CurrentTime" OnClose="@OnTimePickerClose" OnConfirm="@OnTimePickerClose" />
                </span>
            </div>
            <div class="date-picker-header">
                @if (ShowLeftButtons)
                {
                    <button type="button" aria-label="@AiraPrevYearLabel" class="picker-panel-icon-btn" @onclick="@OnClickPrevYear">
                        <i class="fa-solid fa-angles-left"></i>
                    </button>
                    <button type="button" aria-label="@AiraPrevMonthLabel" class="@PrevMonthClassName" @onclick="@OnClickPrevMonth">
                        <i class="fa-solid fa-angle-left"></i>
                    </button>
                }
                <div class="d-flex align-items-center justify-content-center flex-fill">
                    <DynamicElement TagName="span" role="button" class="date-picker-header-label" TriggerClick="@(Ranger == null)" OnClick="@(() => SwitchView(DatePickerViewMode.Year))">@YearString</DynamicElement>
                    <DynamicElement TagName="span" role="button" class="@CurrentMonthViewClassName" TriggerClick="@(Ranger == null)" OnClick="@(() => SwitchView(DatePickerViewMode.Month))">@MonthString</DynamicElement>
                </div>
                @if (ShowRightButtons)
                {
                    <button type="button" aria-label="@AiraNextMonthLabel" class="@NextMonthClassName" @onclick="@OnClickNextMonth">
                        <i class="fa-solid fa-angle-right"></i>
                    </button>
                    <button type="button" aria-label="@AiraNextYearLabel" class="picker-panel-icon-btn" @onclick="@OnClickNextYear">
                        <i class="fa-solid fa-angles-right"></i>
                    </button>
                }
            </div>
            <div class="picker-panel-content">
                <table cellspacing="0" cellpadding="0" class="@DateViewClassName">
                    <tbody>
                        <tr>
                            @foreach (var w in WeekLists)
                            {
                                <th>@w</th>
                            }
                        </tr>
                        @for (var week = StartDate; week < EndDate; week = GetSafeDayDateTime(week, 7))
                        {
                            <tr class="date-table-row">
                                @for (var index = 0; index < 7; index++)
                                {
                                    var day = GetSafeDayDateTime(week, index);
                                    var text = GetDayText(day.Day);
                                    var isOverflow = IsDayOverflow(week, index);
                                    <td class="@GetDayClass(day, isOverflow)">
                                        <div>
                                            @if (isOverflow)
                                            {
                                                <span class="cell"> - </span>
                                            }
                                            else if (IsDisabled(day))
                                            {
                                                <span class="cell">@text</span>
                                            }
                                            else
                                            {
                                                <DatePickerCell Value="@GetSafeDayDateTime(week, index)" Text="@text" OnClick="d => OnClickDateTime(d)" />
                                            }
                                        </div>
                                    </td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
                <table class="@YearViewClassName">
                    <tbody>
                        @for (var row = 0; row < 5; row++)
                        {
                            <tr>
                                @for (var index = 0; index < 4; index++)
                                {
                                    var year = index + row * 4;
                                    var isOverflow = IsYearOverflow(CurrentDate, year - (CurrentDate.Year % 20));
                                    <td class="@GetYearClassName(year, isOverflow)">
                                        @if (isOverflow)
                                        {
                                            <div>
                                                <span class="cell"> - </span>
                                            </div>
                                        }
                                        else
                                        {
                                            <div>
                                                <DatePickerCell Value="@GetYear(year)" Text="@GetYearText(year)" OnClick="d => SwitchView(DatePickerViewMode.Month, d)" />
                                            </div>
                                        }
                                    </td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
                <table class="@MonthViewClassName">
                    <tbody>
                        @for (var row = 0; row < 3; row++)
                        {
                            <tr>
                                @for (var index = 0; index < 4; index++)
                                {
                                    var month = index + row * 4 + 1;
                                    <td class="@GetMonthClassName(month)">
                                        <div>
                                            <DatePickerCell Value="@GetMonth(month)" Text="@GetMonthText(month)" OnClick="d => SwitchView(ViewMode == DatePickerViewMode.Date ? DatePickerViewMode.Date : DatePickerViewMode.DateTime, d)" />
                                        </div>
                                    </td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @if (ShowFooter)
    {
        <div class="picker-panel-footer">
            <div class="flex-fill">
                @if (AllowNull)
                {
                    <Button class="picker-panel-link-btn is-confirm" Color="Color.None" OnClickWithoutRender="@ClickClearButton">
                        <span>@ClearButtonText</span>
                    </Button>
                }
            </div>
            @if (MinValue == null && MaxValue == null)
            {
                <Button class="picker-panel-link-btn is-now" Color="Color.None" OnClickWithoutRender="@ClickNowButton">
                    <span>@NowButtonText</span>
                </Button>
            }
            <Button class="picker-panel-link-btn is-confirm" Color="Color.None" OnClickWithoutRender="@ClickConfirmButton">
                <span>@ConfirmButtonText</span>
            </Button>
        </div>
    }
</div>
